<script setup lang="ts">
import {useRoute, useRouter} from 'vue-router'
import {computed, onBeforeMount, onMounted, onUpdated, reactive, ref} from "vue";
import axios from "axios";
import {getOrdersById} from "../network/api.ts";


const route = useRoute()
const router = useRouter()
let user = ref({
  userId:sessionStorage.getItem("userId"),
  password:"",
  userName:sessionStorage.getItem("userName"),
  userSex:sessionStorage.getItem("userSex"),
  userImg:""
})

let business = ref({  //这里必须使用ref才能响应式赋值字典, 否则会出bug
  businessId:'',
  businessName:'',
  businessAddress:'',
  businessExplain:'',
  bussinessImg:'',
  orderTypeId:1,
  starPrice:0.0,
  deliveryPrice:0.0,
  remarks:'',
  quantity:1
})
let orderdetailet = reactive({
  odId:0,
  orderId:0,
  foodId:0,
  quantity:0,
  food:{
    foodId:0,
    foodName:"",
    foodExplain:"",
    foodImg:"",
    foodPrice:0.0,
    businessId:0,
    remarks:""
  }
})
let order = ref({
  orderId:0,
  userId:'',
  businessId:0,
  orderDate:"",
  orderTotal:0.0,
  daId:0,
  orderState:0,
  business: reactive({
    businessId:'',
    businessName:'',
    businessAddress:'',
    businessExplain:'',
    bussinessImg:'',
    orderTypeId:1,
    starPrice:0.0,
    deliveryPrice:0.0,
    remarks:'',
    quantity:1
  }),
  list:reactive([orderdetailet])
})
let bussinessId = route.query.businessId
let userT = sessionStorage.getItem("user")
let userId = sessionStorage.getItem("userId")
let isShowDetailet = ref(false)


getOrdersById(route.query.orderId).then(res=>{
    order.value = res.data
    console.log("order.value.business = ")
    console.log(order.value.business)
  //上面的console生效 需要购物车里有东西
  })

function detailetShow(){
  isShowDetailet.value = !isShowDetailet.value
}
</script>

<template>
  <div class="wrapper w-full h-full">

    <!-- header部分 -->
    <header class="w-full h-12vw bg-[#0097ff] flex justify-around items-center text-white text-[4.8vw] fixed left-0 top-0 z-1000">
      <p>在线支付</p>
    </header>

    <!-- 订单信息部分 -->
    <h3 class="mt-12vw ml-3vw box-border pt-4vw pb-4vw  text-4vw font-300 text-#999">订单信息：</h3>
    <div class="order-info box-border m-4vw text-#666 flex justify-between items-center text-4vw">
      <p class="flex justify-center items-center">
        {{order.business.businessName}}
        <div class="fa fa-caret-down mt-1vw w-6vw hover:text-#0097EF" @click="detailetShow">
          <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 256 256"><path fill="currentColor" d="m216.49 104.49l-80 80a12 12 0 0 1-17 0l-80-80a12 12 0 0 1 17-17L128 159l71.51-71.52a12 12 0 0 1 17 17Z"/></svg>
        </div>
      </p>
      <p class="text-orange">&#165;{{order.orderTotal}}</p>
    </div>

    <!-- 订单明细部分 -->
    <ul class="order-detailet w-full" v-show="isShowDetailet">
<!--      li 属性不能 w-full, 否则再设置边距就会 滚动-->
      <li  v-for="item in order.list"
          class=" box-border  py-4vw flex justify-between items-center ml-4vw mr-4vw">
        <p class="text-3vw text-#666">{{item.food.foodName}} x {{item.quantity}}</p>
        <p class="text-3vw text-#666">&#165;{{item.food.foodPrice*item.quantity}}</p>
      </li>
      <li class=" box-border  py-4vw flex justify-between items-center ml-4vw mr-4vw">
        <p class="text-3vw text-#666">配送费</p>
        <p class="text-3vw text-#666">&#165;{{order.business.deliveryPrice}}</p>
      </li>
    </ul>

    <!-- 支付方式部分 -->
    <ul class="payment-type w-full">
      <li class="w-full box-border p-4vw flex justify-between items-center">
        <img class="w-33vw text-#38ca73" src="../assets/alipay.png">
        <i class="fa fa-check-circle"></i>
      </li>
      <li class="w-full box-border p-4vw flex justify-between items-center">
        <img class="w-33vw text-#38ca73" src="../assets/wechat.png">
      </li>
    </ul>
    <div class="payment-button w-full box-border p-4vw ">
      <button class="w-full h-10vw border-none outline-none rounded-4px bg-#38ca73 text-white text-4vw">确认支付</button>
    </div>


  </div>
</template>

<style scoped>

</style>